<template>
  <main class="c-rank">
    <div class="item" v-for="(item,index) in list" :key="index">
      <div class="title">
        <img src="@/assets/images/rank_blue.png" alt="" v-if="item.type==='blue'">
        <img src="@/assets/images/rank_red.png" alt="" v-if="item.type==='red'">
        <img src="@/assets/images/rank_yellow.png" alt="" v-if="item.type==='yellow'">
        <div class="text">{{ item.title }}</div>
      </div>
      <div class="value">
        {{ item.value }}
      </div>
    </div>
  </main>
</template>

<script lang="js">
export default {
  name: "cRank",
  data() {
    return {
      list: [
        {type: "yellow", value: '13', title: '优秀科室'},
        {type: "blue", value: '54', title: '良好科室'},
        {type: "red", value: '12', title: '合格科室'}
      ]
    }
  }
}
</script>

<style scoped lang="stylus">
.c-rank {
  height 100%
  display flex
  align-items center
  justify-content space-between

  .item {
    height 180px
    width 250px
    background #F1F8FF
    border-radius 8px
    position relative

    .title {
      position absolute
      top 30px

      img {
        width 100%
      }

      .text {
        position absolute
        left 50%
        top 8px
        transform translateX(-50%)
        font-size: 14px;
        color: #FFFFFF;
        text-align: center;
        line-height: 14px;
      }
    }

    .value {
      bottom 24px
      left 50%
      transform translateX(-50%)
      position absolute
      font-size: 60px;
      color: #4B82FB;
      text-align: center;
      line-height: 60px;
    }
  }
}
</style>
